{% extends 'base.html' %}
{% block title %}订单展示页{% endblock %}
{% load custom_filters %}
{% block link %}
  <link rel="stylesheet" href="/static/css/customer/order.css">{% endblock %}
{% block js %}
  <script src="/static/js/customer/order.js"></script>{% endblock %}
{% block header %}{% include 'include/_header.html' %}{% endblock %}
{% block content %}
  <main id="main">
    {% csrf_token %}
    <div class="layui-container"> <!--实现页面内容居中，两边留白-->
      <table class="layui-hide" id="shopping_list"></table>
      <div class="layui-form layui-border-box layui-table-view layui-table-view-1" lay-filter="LAY-TABLE-FORM-DF-1"
           lay-id="test" style=" ">
        <div class="layui-table-box">
          <div class="layui-table-header">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
              <thead>
              <tr>
                <th data-field="order_no" data-key="1-0-1" class="" style="width: 320px;">
                  <span>订单</span>
                </th>
                <th data-field="status" data-key="1-0-2" class="layui-unselect" style="width: 120px;height:40px;">
                  <span>状态</span>
                </th>
                <th data-field="money" data-key="1-0-3" data-minwidth="150" class="" style="width: 100px;">
                  <span>金额</span>
                </th>
                <th data-field="subject" data-key="1-0-4" data-minwidth="150" class="" style="width: 500px;">
                  <span>商品描述</span>
                </th>
                <th data-field="update_time" data-key="1-0-5" class=" layui-unselect" style="width: 200px;">
                  <span>时间</span>
                </th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="layui-table-body layui-table-main">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
              <tbody>
              {% for order in order_list %}
                <tr data-index="{{ forloop.counter0 }}" class="">
                  <td data-field="order_no" data-key="1-0-1" class="" style="width: 320px;">
                    <span style="padding: 10px;" id="order_no">{{ order.order_no }}</span>
                  </td>
                  <td data-field="status" data-key="1-0-2" class="" style="width: 120px; height: 50px;">
                    <span style="background-color:{{ order.status|color }};padding: 10px;color:white">{% if order.status == 0 %}<a id="alipay" href="javascript:0" onclick="aliPay({{ order.id }})">{{ order.status|status }}</a>{% else %}{{ order.status|status }}{% endif %}</span>
                  </td>
                  <td data-field="money" data-key="1-0-3" class="" style="width: 100px;">
                    <span style="padding: 10px; color:red;" id="money">￥{{ order.money }}</span>
                  </td>
                  <td data-field="subject" data-key="1-0-4" data-minwidth="150" class="" style="width: 500px;">
                    <span style="padding: 10px;" id="subject">{{ order.subject }}</span>
                  </td>
                  <td data-field="update_time" data-key="1-0-5" class="" style="width: 200px;">
                    <span style="padding: 10px;">{{ order.update_time }}</span>
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% pagination_html %}
      </div>
    </div>
  </main>
{% endblock %}
{% block footer %}{% include 'include/_footer.html' %}{% endblock %}